iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0
自我挑戰組

從零開始自學HTML/CSS網頁設計系列 第 8

適當的標記HTML的清單和表格

  • 分享至 

  • xImage
  •  

接下來要介紹如何將內文標記為清單和表格。首先是清單的部分,清單分成有順序和無順序。而什麼時候會需要用到清單呢?為了讓目標讀者能夠快速了解文章的主要內文是關於什麼的,我們就必須要製作重要資訊的導覽選單,這時候就必須要將文字標記為清單。如下所示,以ul標籤框住要列為清單的內容,各項目再用li標籤框住:
https://ithelp.ithome.com.tw/upload/images/20220921/20152190d6dASyxfuP.png
然後點選及時預覽(Live Preview)開啟瀏覽器:
https://ithelp.ithome.com.tw/upload/images/20220921/201521907cTOFWVMwS.png
可以發現各項目都顯示了「•」。

而如果希望標記的清單內容要有順序顯示,則可以以ol標籤框住要列為清單的內容,各項目再用li標籤框住:
https://ithelp.ithome.com.tw/upload/images/20220921/20152190WN4DHhoFE2.png
然後點選及時預覽(Live Preview)開啟瀏覽器:
https://ithelp.ithome.com.tw/upload/images/20220921/201521906qrivmAwIz.png
可以發現各項目都顯示了編號。

再來是表格的部分,首先使用table標籤框住整個內容,再以tr標籤建立一個儲存格、標籤框住表格標題、td標籤框住表格內容,如下所示:
https://ithelp.ithome.com.tw/upload/images/20220921/2015219032ntbrAf0l.png
然後點選及時預覽(Live Preview)開啟瀏覽器:
https://ithelp.ithome.com.tw/upload/images/20220921/20152190UqGQ32UJUg.png
此時的表格還沒框線是因為還沒有使用CSS設定,往後會加以說明。

這樣一來就完成了內文的標記了!明天會介紹各種HTML的章節標籤。


上一篇
適當的標記HTML的標題和段落
下一篇
HTML的章節標籤
系列文
從零開始自學HTML/CSS網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言